<script setup lang="ts">
import {inject, ref} from "vue";
import {useRouter} from "vue-router";
import {type Tab} from "@/composables/data/tabs";
import {content_tab_key} from "@/composables/utils/keys";

const tabs  = ref(inject(content_tab_key) as Tab[])

// eslint-disable-next-line no-import-assign
const router = useRouter()

function toggleCustomTab(tabSelected: Tab) {
  tabs.value.forEach(item => {
    item.active = item.index === tabSelected.index;
  })

  router.push({path: tabSelected.path})
}

</script>

<template>
  <div>
    <div class="custom-tab">
      <div :class="item.active ? 'custom-tab-item custom-tab-item-active' :'custom-tab-item'"
           v-for="item in tabs"
           :key="item.path"
           @click="toggleCustomTab(item)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-tab {
  @apply tw-flex tw-flex-row tw-justify-items-start tw-items-center tw-gap-2 ;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 10px;
  min-width: 100px;
  height: auto;
  border-radius: 5px;
  cursor: pointer;
  padding:4px;
}

.custom-tab-item {
  @apply tw-flex tw-items-center tw-justify-center tw-text-neutral-300;
  height: 32px;
  line-height: 32px;
  min-width: 48px;
  font-size: 12px;
  padding: 2px;
  border-radius: 5px;
  transition: all 0.3s;

  &:hover {
    @apply tw-bg-neutral-700 tw-text-neutral-100;
    font-weight: bold;
    color: var(--ep-color-primary);
  }
}

.custom-tab-item-active {
  @apply tw-bg-neutral-700;
  font-weight: bold;
  color: var(--ep-color-primary);
}
</style>